<template>
    <view class="page">
        <u-navbar title="商品订单" :custom-back="goMy" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <!-- 订单tab -->
        <z-paging ref="paging" v-model="dataList" @query="getList">
            <template #top>
                <!-- <view class="order-tab">
                    <view class="tab" v-for="item,index in stateList" :key="index" :class="{'action':(queryParams.type==item.dictValue)}" v-if="item.dictValue!=-1"
                        @click="onOrderTab(item.dictValue)">
                        <text>{{item.dictLabel}}</text>
                        <text class="line"></text>
                    </view>
                </view> -->
                <z-tabs class="service-tab" :current="tabIndex" :style="'top:'+ (titletop+titleheight)+'px'" :list="tabList" active-color="#2e996f"
                    @change="tabChange" />
            </template>
            <!-- 订单列表 -->
            <view class="order-list">
                <view class="list" v-for="(item, index) in dataList" :key="index" @click="onOrderList(item.order_no)">
                    <view class="title-status">
                        <view class="title">
                            <text class="p1">订单号：</text>
                            <text class="p2">{{ item.order_no }}</text>
                        </view>
                        <view class="status">
                            <text>{{selectDictLabel(stateList,item.orders_state)}}</text>
                            <text class="iconfont icon-laji del" v-if="item.orders_state=='0' || item.orders_state=='2' || item.orders_state=='3'"
                                @click.stop="del(item.order_no)"></text>
                        </view>
                    </view>
                    <view class="goods-list">
                        <view class="goods" v-for="it,i in dataList[index].lists" :key="i">
                            <view class="goodsli">
                                <view class="thumb">
                                    <image :src="it.goods_cover" mode="widthFix"></image>
                                </view>
                                <view class="item">
                                    <view class="goods-name">
                                        <text class="title one-omit">
                                            {{ it.goods_name }}
                                        </text>
                                        <text class="desc two-omit">
                                            {{ it.specify }}
                                        </text>
                                    </view>
                                    <view class="goods-price">
                                        <!-- <text class="min">￥</text>
                                <text class="max">299</text>
                                <text class="min">.00</text> -->
                                        <text class="price">¥{{ it.price_selling }}</text>
                                        <text class="num">×{{ it.stock_sales }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="status-btn">
                                <view class="btn" v-if="item.orders_state=='3'" @click.stop="onEvaluate(it)">
                                    <text>评价</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="timeBox">
                        <text class="time">
                            {{ item.create_time }}
                        </text>
                        <text class="num">
                            金额：¥{{ item.pay_price }}
                        </text>
                    </view>
                    <view class="status-btn">
                        <view class="btn" v-if="item.orders_state=='0'" @click.stop="onPicker(item.order_no)">
                            <text>取消订单</text>
                                <u-picker mode="selector" v-model="isShow" :range="reasonList" title="请选择取消原因" @confirm="pickReason"></u-picker>
                                    <!-- :show="show" :columns="reasonList" @change="reasonPickerChange" :value="Index" :range="reasonList" <view class="uni-input" style="height: 100rpx">{{
                                        orgText
                                        }}</view> @click.stop="cancle(item.order_no)"-->  
                        </view>
                        <view class="btn" v-if="item.orders_state=='2' ||item.orders_state=='3'" @click.stop="goPage('/pagesA/my/logistics',item.order_no)">
                            <text>查看物流</text>
                        </view>
                        <!-- <view class="btn" @click.stop="torefund(item.order_no)">
                            <text>申请退款</text>
                        </view> -->
                        <view class="btn action" v-if="item.orders_state=='0'" @click.stop="toPay(item.order_no)">
                            <text>立即付款</text>
                        </view>
                        <view class="btn action" v-if="item.orders_state=='2'" @click.stop="toReceive(item.order_no)">
                            <text>确认收货</text>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <DialogBox ref="DialogBox"></DialogBox>
    </view>
</template>
<script>
import { goodsOrederState } from "@/api/dictionary.js"
import { getGoodsLists, setGoodsOrderToDel, setGoodsOrderToCancel, setGoodsOrderToInitPay, setGoodsOrderToReceive, getGoodsOrderCancelReasonLists } from "@/api/my/orderList.js"
export default {
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 20,
                type: '',
            },
            stateList: goodsOrederState, //订单状态 '': -1:已取消 0:待付款 1:待发货 2:待收货 3:待评价 4:已评价
            tabList: [],
            dataList: [],
            tabIndex: 0,
            specify: "",
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            titleheight: 0,
            titletop: 0,
            tabIndex: 0,
            isLogin: uni.getStorageSync('token') ? true : false,
            reasonList:[],
            isShow:false,
            orderNumber:'',
        };
    },
    onLoad(params) {
        if (params) {
            this.queryParams.type = params.type;
            this.tabIndex = this.stateList.findIndex(item => item.dictValue == params.type)
        }
        // #ifdef MP-WEIXIN
        getApp().getHeight();
        this.titleheight = getApp().titleheight;
        this.titletop = getApp().titletop;
        // #endif
    },
    onShow() {
        this.tabList = []
        this.stateList.forEach(e => {
            if (e.dictValue != -1) {
                this.tabList.push(e.dictLabel)
            }
        });
    },
    methods: {
        getList(page) {
            if (this.isLogin) {
                this.queryParams.page = page
                getGoodsLists(this.queryParams).then(res => {
                    let data = res.data.lists
                    data.forEach(e => {
                        e.lists.forEach(element => {
                            let newStr = element.goods_spec.replace(/::/g, ":")
                            element.specify = newStr.replace(/;;/g, ";")
                        });
                    });
                    this.$refs.paging.complete(data);
                }).catch(err => {
                    this.$refs.paging.complete(false);
                })
            } else {
                let data = []
                this.$refs.paging.complete(data);
            }
        },
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 订单tab点击
         */
        onOrderTab(type) {
            this.queryParams.type = type;
            this.$refs.paging.reload();
        },
        tabChange(index) {
            this.tabIndex = index;
            // this.cateId = this.tabList[index].id
            // //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
            this.queryParams.type = this.stateList[index].dictValue;
            this.$refs.paging.reload();
        },
        /**
         * 订单列表点击
         */
        onOrderList(orderNo) {
            uni.navigateTo({
                url: '/pagesA/my/orderDetails?orderNo=' + orderNo,
            })
        },

        // 申请退款
        torefund(data) {
            uni.navigateTo({
                url: `/pagesA/my/order-refund?order_id=${data}`
            });
        },
        /**
         * 评价点击
         */
        onEvaluate(row) {
            uni.navigateTo({
                url: '/pagesA/my/myEvaluatePush?data=' + encodeURIComponent(JSON.stringify(row))
            })
        },

        toPay(orderNo) {
            setGoodsOrderToInitPay({ order_no: orderNo }).then(res => {
                if (res.code == 1) {
                    let data = { ...res.data, ...{ pageType: 1 } }
                    uni.navigateTo({
                        url: '/pagesA/mall/cashierDesk?dataList=' + encodeURIComponent(JSON.stringify(data))
                    })
                }
            })
        },
        toReceive(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要确认收货?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setGoodsOrderToReceive({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已确认收货~")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        /**
        * 取消订单
        */
       onPicker(id){
           this.isShow = true
           this.orderNumber = id
           getGoodsOrderCancelReasonLists().then(res =>{
               if (res.code == 1){
                   this.reasonList = res.data
               }
           }).catch(err => {
                console.log(err);
            })
       },
       
       pickReason(e){
           let params = {
               order_no:this.orderNumber,
               reason:this.reasonList[e]
           }
            console.log(params,'reason')
           setGoodsOrderToCancel(params).then(res => {
                   if (res.code == 1) {
                       this.getList(1)
                       this.$message("已取消订单~")
                   }
               }).catch(err => {
               console.log(err);
           })
       },
        cancle(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要取消订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setGoodsOrderToCancel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已取消订单~")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        /**
        * 删除订单
        */
        del(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要删除订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setGoodsOrderToDel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已删除订单~！")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        goPage(url, orderNo) {
            uni.navigateTo({
                url: url + "?orderNo=" + orderNo
            })
        },
        goMy() {
            uni.reLaunch({
                url: '/pages/my/my'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
/* 订单tab */
.order-tab {
  position: fixed;
  left: 0;
  top: 100rpx;
  /* #ifdef APP-PLUS || MP-WEIXIN */
  top: calc(100rpx + var(--status-bar-height));
  /* #endif */
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  .tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 80%;
    text {
      font-size: 26rpx;
      color: #5e5e5e;
    }
  }
  .action {
    text {
      color: #ea5504;
    }
    .line {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 62rpx;
      height: 10rpx;
      border-radius: 4px;
      background-color: #ea5504;
      transform: translate(-50%, 0);
    }
  }
}

/* 订单列表 */
.order-list {
  width: 100%;

  .list {
    padding: 0 4%;
    min-height: 400rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    .title-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      .title {
        display: flex;
        align-items: center;
        line-height: 26rpx;
        .p1 {
          font-size: 26rpx;
          color: #3c3c3c;
        }
        .p2 {
          font-size: 26rpx;
          color: #989898;
        }
      }
      .status {
        display: flex;
        align-items: center;
        text {
          font-size: 26rpx;
          color: #e5530e;
        }
        .del {
          padding: 10rpx;
          font-size: 34rpx;
          color: #222222;
          background-color: #f6f6f6;
          border-radius: 100%;
          margin-left: 20rpx;
        }
      }
    }
    .goods-list {
      width: 100%;
      padding: 30rpx 0 0;
      border-top: 2rpx solid #dcdcdc;
      .goods {
        width: 100%;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #dcdcdc;
        .goodsli {
          display: flex;
          align-items: center;
          .thumb {
            display: flex;
            align-items: center;
            width: 25%;
            height: 100%;
            image {
              width: 160rpx;
              height: 160rpx;
              border-radius: 10rpx;
            }
          }
          .item {
            display: flex;
            align-items: center;
            width: 75%;
            height: 100%;
            justify-content: space-between;
            .goods-name {
              width: 70%;
              .title {
                font-size: 26rpx;
                color: #0a0a0a;
                font-weight: 600;
                margin-bottom: 14rpx;
              }
              .desc {
                font-size: 24rpx;
                color: #3c3c3c;
              }
            }
            .goods-price {
              display: flex;
              flex-direction: column;
              text-align: right;
              .price {
                font-size: 26rpx;
                color: #3c3c3c;
                margin-bottom: 30rpx;
              }
              .num {
                font-size: 26rpx;
                color: #3c3c3c;
              }
              // text {
              //   color: #222222;
              // }
              // .min {
              //   font-size: 26rpx;
              // }
              // .max {
              //   font-size: 34rpx;
              // }
            }
          }
        }
      }
    }
    .timeBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      .time {
        font-size: 24rpx;
        color: #989898;
      }
      .num {
        font-size: 28rpx;
      }
    }
    .status-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn {
        padding: 10rpx 30rpx;
        border: 2rpx solid #eeeeee;
        border-radius: 100rpx;
        margin: 20rpx 0 20rpx 20rpx;
        // margin-left: 20rpx;
        text {
          font-size: 26rpx;
          color: #555555;
        }
      }
      .action {
        background-color: #ea5504;
        border: 2rpx solid #e5530e;
        text {
          color: #ffffff;
        }
      }
      .picker{
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
      }
    }
  }
}
/* 订单tab */
.service-tab {
  position: fixed;
  left: 0;
  // #ifdef APP-PLUS || H5
  top: calc(88rpx + var(--status-bar-height));
  // #endif
  z-index: 999;
  width: 100%;

  /deep/.z-tabs-conatiner {
    height: 120rpx;
    padding-top: 30rpx;
  }
}
/deep/.zp-custom-refresher-view {
  //   z-index: 99999999;
  margin-top: calc(125rpx + var(--status-bar-height)) !important;
}
</style>
